<template>
  <div class="home">
    <router-link to="/about">跳转到列表页面</router-link>
    <button @click="cut">切换组件</button>
     <!-- <A v-if="isA"></A>
     <B v-else></B> -->
     <!-- 内置组件 渲染组件的 -->
     <!-- include 要缓存的组件 -->
     <!-- exclude 不缓存的组件 -->
     <keep-alive exclude="A">
      <component :is="comName"></component>
     </keep-alive>
    
  </div>
</template>

<script>
// @ is an alias to /src
import A from '../components/A.vue'
import B from '../components/B.vue'
export default {
  name: 'HomeView',
  components: {
    A,B
  },
  data(){
    return{
      isA: true,
      comName: 'A'
    }
  },
  created(){
    console.log('页面A');
  },
  activated(){ // 当使用keep-alive 缓存页面的时候 会触发该生命周期
    console.log('页面A+');
  },
  destroyed(){  // 

  },
  deactivated(){ //当使用keep-alive 离开页面会触发该函数

  },
  methods:{
    cut(){
      this.comName = this.comName == "A"?"B":"A"
    }
  }
}
</script>
